<template>
    <div>
        <div>
            <div id="chart1" style="width:700px;height:340px;"></div>
        </div>
    </div>
</template>

<script>
//import axios from 'axios'
import * as echarts from 'echarts';// eslint-disable-line no-unused-vars

export default ({
    data() {
        return {
            nationNames: [],
            nationTotals: [],
            regionTotals: []
        }
    },
    methods: {
        // getNationTotals(){
        //      axios({
        //          url:'http://localhost:8080/echarts/nationTotalList',
        //          method:'GET',
        //     }).then(res=>{
        //        let result = res.data;
        //          for(let i=0;i<result.length;i++){
        //             this.nationNames.push(result[i].name);
        //             this.nationTotals.push(result[i].total);
        //          }
        //          let nationArr = JSON.parse(JSON.stringify(this.nationNames));
        //          let nationTotals = JSON.parse(JSON.stringify(this.nationTotals));
        //          console.log("消费额最高的国家：" + nationArr);
        //          console.log("消费额最高的国家的消费额：" + nationTotals);
        //          this.bar(nationArr,nationTotals);
        //     })
        // },
        //绘制柱状图表
        bar(nationNames, nationTotals) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart1'));
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    //data:nationNames
                    data:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: { name: '销售额（元）' },
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        //data: nationTotals,
                        data:  [5, 20, 66, 10, 10, 20],
                        label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值。名称等
                            show: true
                        },
                        smooth: true,//表示平滑曲线显示
                    },
                    {
                        name: '销售量',
                        type: 'bar',
                        data: [5, 20, 66, 10, 10, 20],
                    }
                ]
            });
        }
    },
    mounted() {
        console.log('mounted-id', document.getElementById("charts"));
        // this.getNationTotals();
        this.bar();
    },

})

</script>

<style></style>
